<template>
    <div>
    <el-form inline class="demo-form-inline">
    <el-row >
        <el-col :span="5">
            <el-form-item label="采购人Id">
                <el-input v-model="query.payload.assigneeId" style="width: 100%;" placeholder="采购人Id"/>
            </el-form-item>
        </el-col>
        <el-col :span="5" >
            <el-form-item label="采购人姓名" >
                <el-input v-model="query.payload.assigneeName" placeholder="采购人姓名"/>
            </el-form-item>
        </el-col>
        <el-col :span="5" >
            <el-form-item label="联系方式">
                <el-input v-model="query.payload.phone" placeholder="联系方式" />
            </el-form-item>
        </el-col>
        <el-col :span="5" >
            <el-form-item label="优先级">
                <el-input v-model="query.payload.priority" placeholder="优先级" />
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="5" >
            <el-form-item label="状态">
                <el-select v-model="query.payload.status" placeholder="请选择">
                    <el-option label="开启" :value = "1+''" />
                    <el-option label="关闭" :value = "0+''" />
                </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="5" >
            <el-form-item label="仓库Id">
                <el-input v-model="query.payload.wareId" placeholder="仓库Id" />
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="总金额" >
                <el-input v-model="query.payload.amount" placeholder="总金额" />
            </el-form-item>
        </el-col>
    </el-row>
    <el-row >
        <el-form-item label="创建时间" >
            <el-date-picker
                v-model="query.dateRange"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" activity @click="queryWmsPurchase">查询</el-button>
            <el-button type="warning" activity @click="reset">重置</el-button>
            <el-button type="success" @click="receiveAll">批量领取</el-button>
        </el-form-item>
    </el-row>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border v-loading="loading"  :data="data.tableData"
              @selection-change="handleSelectionChange"
              header-cell-class-name="headerClass">
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" type="index"  label="序号" width="55px" />
        <el-table-column align="center" prop="id"  label="采购单编号"/>
        <!--<el-table-column align="center" prop="assigneeId" label="采购人Id" />-->
        <el-table-column align="center" prop="assigneeName" label="采购人姓名" />
        <el-table-column align="center" prop="phone" label="联系方式" />
        <el-table-column align="center" prop="priority" label="优先级" />
        <el-table-column align="center" prop="status" label="状态" >
            <template #default="scope">
                <el-tag effect="dark" v-if="scope.row.status===0">新建</el-tag>
                <el-tag effect="dark" type="info" v-else-if="scope.row.status===1">已分配</el-tag>
                <el-tag effect="dark" type="warning" v-else-if="scope.row.status===2">已领取</el-tag>
                <el-tag effect="dark" type="success" v-else-if="scope.row.status===3">已完成</el-tag>
                <el-tag effect="dark" type="danger" v-else-if="scope.row.status===4">有异常</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="wareId" label="仓库Id" />
        <el-table-column align="center" prop="wareNameTemp" label="仓库名" width="150px"/>
        <el-table-column align="center" prop="amount" label="总金额" />
        <el-table-column align="center" prop="updateTime" label="更新时间" width="180px">
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template #default="scope">
                <div v-if="scope.row.status===1">
                    <el-popconfirm title="领取该采购单？" @confirm="receivePurchase(scope.row.id)"  @cancel="">
                        <template #reference>
                            <el-link type="primary" title="领取">
                                <el-icon :size="20">
                                    <Connection />
                                </el-icon>
                                领取
                            </el-link>
                        </template>
                    </el-popconfirm>
                </div>
                <div v-if="scope.row.status===2">
                    <el-link type="primary" title="完成" @click="toDoneWmsPurchaseDetail(scope.row.id)">
                        <el-icon :size="20">
                            <Connection />
                        </el-icon>
                        完成
                    </el-link>
                </div>
            </template>
        </el-table-column>
</el-table>
<el-pagination
        style="display: flex;align-items:center;justify-content:center;"
        v-model:currentPage="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
        @size-change="queryWmsPurchase"
        @current-change="queryWmsPurchase"
/>
<DoneWmsPurchaseDetail @reload="queryWmsPurchase"
                ref="doneWmsPurchaseDetail"
                :openType="transData.openType"
                :id="transData.id" />
</div>
</template>

<script setup>
    import DoneWmsPurchaseDetail from '@/views/mall/wms/components/DoneWmsPurchaseDetail.vue'

    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'
    let doneWmsPurchaseDetail = ref(null)
    let transData=reactive({})
    let table = ref(null)
    let purchases = ref([])
    let data = reactive({
        modRole:false,
        tableData:[],
        openType:"",
        id:"",
    });
    let loading = ref(true)
    let query = reactive({dateRange:[],payload:{}, currentPage:1,pageSize:10,total:0})
    onMounted(() => {
        queryWmsPurchase()
    })
    function queryWmsPurchase(){
        let user = JSON.parse(sessionStorage.getItem("user"))
        query.startTime = query.dateRange[0]
        query.endTime = query.dateRange[1]
        query.payload.assigneeId = user.id

        request.post("/api/myWmsPurchase/getWmsPurchasePage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset(){
        query.payload.phone = ""
        query.payload.priority = ""
        query.payload.status = ""
        query.payload.wareId = ""
        query.payload.amount = ""
        query.dateRange=[]
    }

    const handleSelectionChange = (rows) => {
        purchases.value.length=0
        rows.forEach(row=>{
            if(row.status===1){
                table.value.toggleRowSelection(row,true)
                purchases.value.push(row.id);
            }else{
                table.value.toggleRowSelection(row, false)
                debugger
                ElMessage({message:"单号"+row.id+'已经领取！',type: 'error'})
            }
        })
    }

    const receivePurchase=(id)=>{
        let ids = [id]
        request.post("/api/myWmsPurchase/receive", ids).then(resp => {
            ElMessage({message: '领取成功！',type: 'success'})
            queryWmsPurchase()
        })
    }
    const receiveAll=()=>{
        if(purchases.value.length===0){
            ElMessage({message: '请勾选采购单！',type: 'error'})
            return
        }
        request.post("/api/myWmsPurchase/receive", purchases).then(resp => {
            ElMessage({message: '领取成功！',type: 'success'})
            queryWmsPurchase()
        })
    }
    const toDoneWmsPurchaseDetail=(id)=>{
        transData.id = id
       doneWmsPurchaseDetail.value.isOpen = true
    }
</script>
<style lang="css">
.el-form-item{
    display: flex;
    margin-right: 0px;
}
.el-form-item__label{
    /*flex: 1;*/
}
.el-form-item__content{
    /*flex: 1;*/
}
</style>


